<template>
	<view class="content">
		<image src="../../../static/home/home-bg.png" mode="widthFix" class="top-img"></image>
		<!-- <view mode="widthFix" class="top-img"></view> -->
		<CustomNav :topBgColor="topBgColor" :color="titleColor" :backColor="'#999'" :isBack="true" :custom="custom"
			:title="'我要投诉'"></CustomNav>
		<view class="info-block">
			<view class="menu-block">
				<view class="menu-item1">
					<view class="round">1</view>
					<view class="txt">阅读须知</view>
				</view>
				<view class="line"></view>
				<view class="menu-item">
					<view class="round">2</view>
					<view class="txt">填写信息</view>
				</view>
				<view class="line"></view>
				<view class="menu-item">
					<view class="round">3</view>
					<view class="txt">投诉内容</view>
				</view>
			</view>
			<view class="text-block">
				<view class="title">举报投诉须知</view>
				<view class="text">投诉须知:您需要提供被拖欠工资的相关依据，无依据可能会导致查处困难。若您的诉求实为工程款项，建议您通过司法途径维护您的合法权益以免耽误维权时间。</view>
				<view class="text">投诉应符合以下条件:</view>
				<view class="text">1、违反劳动保障法律的行为发生在两年以内。</view>
				<view class="text">2、有明确的被投诉用人单位，且投诉人的合法权益受到侵害是被投诉用人单位违反劳动保障法律的行为造成的。</view>
				<view class="text">3、属于劳动保障监察职权范围并由受理投诉的劳动保障行政部门管辖。</view>
				<view class="text">4、劳动保障合法权益受到侵害的事实和投诉请求事项，对因同一事由引起的集体投诉，投诉人可推荐代表投诉。</view>
				<view class="agree-item">
					<checkbox-group @change="checkChange">
						<checkbox value="agree" :checked="agree" color="#027BFF" class="check" id="agree"></checkbox>
						<label for="agree" class="check-label">我已阅读并同意遵守以上事项，同意协议并授权<text class="book"
								@click.stop="navigate('/pages/index/complaint/user_service')">《用户服务须知》</text>
							及<text class="book"
								@click.stop="navigate('/pages/index/complaint/privacy_policy')">《隐私政策》</text></label>
					</checkbox-group>
				</view>
			</view>
			<view class="btn-item" @click="navigate('/pages/index/complaint/information')">
				<view class="btn">下一步</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getCustomNavData
	} from '@/util/util.js'
	import {
		validate
	} from '@/util/validate.js'
	export default {
		data() {
			return {
				type: 1,
				custom: null,
				topBgColor: 'rgba(0,0,0,0)',
				titleColor: '#fff',
				form: {
					checked: []
				},
				rules: {
					checked: {
						name: '',
						required: false,
						validator: function(value, form, callback) {
							if (value.length == 0) {
								callback('请勾选同意协议！');
							}
							callback();
						}
					},
				},
			}
		},
		onPageScroll(e) {
			if (e.scrollTop >= 50) {
				this.topBgColor = '#117DFF';
			} else {
				this.topBgColor = 'rgba(0,0,0,0)';
			}
		},
		methods: {
			navigate(url) {
				if (validate(this.form, this.rules)) {
					uni.navigateTo({
						url
					})
				}
			},
			checkChange(e) {
				this.form.checked = e.detail.value;
			},
		},
		onLoad() {
			this.custom = getCustomNavData();
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;

		.top-img {
			width: 100%;
		}

		.info-block {
			display: flex;
			flex-direction: column;
			background: #F5F5F5;
			margin-top: -200rpx;
			border-radius: 60rpx;
			position: relative;
			padding: 30rpx;

			.menu-block {
				display: flex;
				background: #fff;
				border-radius: 30rpx;
				position: relative;
				padding: 40rpx;
				justify-content: center;

				.menu-item1 {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.round {
						width: 50rpx;
						height: 50rpx;
						color: #fff;
						border-radius: 50%;
						background-color: #027BFF;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.txt {
						color: #027BFF;
						font-size: 32rpx;
						margin-top: 20rpx;
					}
				}

				.menu-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.round {
						width: 50rpx;
						height: 50rpx;
						color: #fff;
						border-radius: 50%;
						background-color: #D8D8D8;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.txt {
						color: #D8D8D8;
						font-size: 32rpx;
						margin-top: 20rpx;
					}
				}

				.line {
					width: 100rpx;
					height: 2rpx;
					background-color: #D8D8D8;
					margin-top: 30rpx;
				}
			}

			.text-block {
				display: flex;
				flex-direction: column;
				border-radius: 30rpx;
				padding: 30rpx;
				background-color: #fff;
				// background: #fff;
				margin-top: 30rpx;
				// background: url('https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/dh_mashangweiquan/bg-img.png') repeat;


				.title {
					text-align: center;
					font-size: 38rpx;
					margin-top: 30rpx;
					font-weight: bold;
					margin-bottom: 30rpx;
				}

				.text {
					text-indent: 60rpx;
					line-height: 70rpx;
				}

				.text:last-child {
					border-bottom: 1px solid #EFEFEF;
					padding-bottom: 30rpx;
				}

				.agree-item {
					display: flex;
					margin-top: 30rpx;
					line-height: 70rpx;
					align-items: flex-start;

					.check {
						transform: scale(0.7);
					}

					.check-label {
						font-size: 26rpx;

						.book {
							color: #027BFF;
						}
					}
				}
			}

			.btn-item {
				width: 100%;
				display: flex;
				justify-content: center;
				margin-bottom: 50rpx;
				margin-top: 60rpx;

				.btn {
					width: 360rpx;
					height: 80rpx;
					background: #027BFF;
					color: #fff;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 60rpx;
				}
			}
		}

	}
</style>